﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Demo/DemoMaster.master" %>

<script runat="server">

</script>
<asp:Content ID="Content1" ContentPlaceHolderID="demoheader" runat="Server">
    Object helper
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="demosubheader" runat="Server">
    Use <span>pushObject</span> to get data from page and <span>setObject</span> to
    set data on page
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="democontent" runat="Server">
    <style type="text/css">
        .detail
        {
            border: 1px solid #888;
            margin: 10px;
        }
        .detail > tbody > tr > td
        {
            padding: 5px;
        }
        .detail input[name='Name'], .detail input[type='text']
        {
            width: 155px;
        }
        .detail input[type='checkbox'], .detail input[type='radio']
        {
            width: 12px;
            height: 12px;
        }
    </style>
    <script type="text/javascript" src="../jQueryClient/object.js"></script>
    <div id="demo">
        <div style="font-weight: bold; margin: 15px;">
            Please fill data into the left panel and click ">>"
        </div>
        <table>
            <tr>
                <td>
                    <div id="divDetail1">
                        <input type="hidden" name="ID" />
                        <table class="detail">
                            <tr>
                                <td>
                                    Name:
                                </td>
                                <td>
                                    <input name="Name" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Bio:
                                </td>
                                <td>
                                    <textarea rows="3" cols="15" name="Bio"></textarea>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    GPA:
                                </td>
                                <td>
                                    <input type="text" name="GPA" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Graduated?
                                </td>
                                <td>
                                    <input type="checkbox" name="Graduated" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Gender:
                                </td>
                                <td>
                                    <input type="radio" name="Gender" value="0" />
                                    Male
                                    <input type="radio" name="Gender" value="1" />
                                    Female
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Birthday:
                                </td>
                                <td>
                                    <input type="text" id="birthday" class="birthday" name="Birthday" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Major:
                                </td>
                                <td>
                                    <select name="Major">
                                        <option value="0">Select</option>
                                        <option value="1">Computer Scinece</option>
                                        <option value="2">Information Technology</option>
                                        <option value="3">Software Engineering</option>
                                        <option value="4">Game Design</option>
                                        <option value="5">Information Security and Forensics</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Hobbies:
                                </td>
                                <td>
                                    <table>
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="Hobbies" value="1" />
                                                Football
                                            </td>
                                            <td>
                                                <input type="checkbox" name="Hobbies" value="2" />
                                                Basketball
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="Hobbies" value="3" />
                                                Soccer
                                            </td>
                                            <td>
                                                <input type="checkbox" name="Hobbies" value="4" />
                                                Volleyball
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="Hobbies" value="5" />
                                                Baseball
                                            </td>
                                            <td>
                                                <input type="checkbox" name="Hobbies" value="6" />
                                                Softball
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="Hobbies" value="7" />
                                                Tennis
                                            </td>
                                            <td>
                                                <input type="checkbox" name="Hobbies" value="8" />
                                                Badminton
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
                <td>
                    <input type="button" value=">>" onclick="copy()" />
                </td>
                <td>
                    <div id="divDetail2">
                        <input type="hidden" name="ID" />
                        <table class="detail">
                            <tr>
                                <td>
                                    name:
                                </td>
                                <td>
                                    <input name="Name" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    bio:
                                </td>
                                <td>
                                    <textarea rows="3" cols="15" name="Bio"></textarea>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    gpa:
                                </td>
                                <td>
                                    <input type="text" name="GPA" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    graduated?
                                </td>
                                <td>
                                    <input type="checkbox" name="Graduated" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    gender:
                                </td>
                                <td>
                                    <input type="radio" name="Gender" value="0" />
                                    Male
                                    <input type="radio" name="Gender" value="1" />
                                    Female
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Birthday:
                                </td>
                                <td>
                                    <input type="text" id="Text1" class="birthday" name="Birthday" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    major:
                                </td>
                                <td>
                                    <select name="Major">
                                        <option value="0">Select</option>
                                        <option value="1">Computer Scinece</option>
                                        <option value="2">Information Technology</option>
                                        <option value="3">Software Engineering</option>
                                        <option value="4">Game Design</option>
                                        <option value="5">Information Security and Forensics</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    hobbies:
                                </td>
                                <td>
                                    <table>
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="Hobbies" value="1" />
                                                football
                                            </td>
                                            <td>
                                                <input type="checkbox" name="Hobbies" value="2" />
                                                basketball
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="Hobbies" value="3" />
                                                soccer
                                            </td>
                                            <td>
                                                <input type="checkbox" name="Hobbies" value="4" />
                                                velleyball
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="Hobbies" value="5" />
                                                baseball
                                            </td>
                                            <td>
                                                <input type="checkbox" name="Hobbies" value="6" />
                                                softball
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="Hobbies" value="7" />
                                                tennis
                                            </td>
                                            <td>
                                                <input type="checkbox" name="Hobbies" value="8" />
                                                badminton
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        $(function () {
            $("select").selectbox({
                effect: "fade"
            });

            $("#divDetail1 .birthday").datepicker({
                dateFormat: "mm/dd/yy"
            });
        });

        function copy() {
            var model = $("#divDetail1").pushObject();
            $("#divDetail2 select").selectbox("detach");
            $("#divDetail2").setObject(model);
            $("#divDetail2 select").selectbox("attach");
        }
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="javascript" runat="Server">
    <pre name="javascriptcode" class="js:nocontrols">
		function copy() {
			//get data from the left panel
			var model = $("#divDetail1").pushObject();
			//set data to the right panel
			$("#divDetail2").setObject(model);
		}
	</pre>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="html" runat="Server">
    <pre name="htmlcode" class="html:nocontrols"> 
	    &lt;table&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;div id=&quot;divDetail1&quot;&gt;
                        &lt;input type=&quot;hidden&quot; name=&quot;ID&quot; /&gt;
                        &lt;table class=&quot;detail&quot;&gt;
                            &lt;tr&gt;
                                &lt;td&gt;
                                    Name:
                                &lt;/td&gt;
                                &lt;td&gt;
                                    &lt;input name=&quot;Name&quot; /&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;
                                    Bio:
                                &lt;/td&gt;
                                &lt;td&gt;
                                    &lt;textarea rows=&quot;3&quot; cols=&quot;15&quot; name=&quot;Bio&quot;&gt;&lt;/textarea&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;
                                    GPA:
                                &lt;/td&gt;
                                &lt;td&gt;
                                    &lt;input type=&quot;text&quot; name=&quot;GPA&quot; /&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;
                                    Graduated?
                                &lt;/td&gt;
                                &lt;td&gt;
                                    &lt;input type=&quot;checkbox&quot; name=&quot;Graduated&quot; /&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;
                                    Gender:
                                &lt;/td&gt;
                                &lt;td&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;Gender&quot; value=&quot;0&quot; /&gt;
                                    Male
                                    &lt;input type=&quot;radio&quot; name=&quot;Gender&quot; value=&quot;1&quot; /&gt;
                                    Female
                                &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;
                                    Birthday:
                                &lt;/td&gt;
                                &lt;td&gt;
                                    &lt;input type=&quot;text&quot; id=&quot;birthday&quot; class=&quot;birthday&quot; name=&quot;Birthday&quot; /&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;
                                    Major:
                                &lt;/td&gt;
                                &lt;td&gt;
                                    &lt;select name=&quot;Major&quot;&gt;
                                        &lt;option value=&quot;0&quot;&gt;Select&lt;/option&gt;
                                        &lt;option value=&quot;1&quot;&gt;Computer Scinece&lt;/option&gt;
                                        &lt;option value=&quot;2&quot;&gt;Information Technology&lt;/option&gt;
                                        &lt;option value=&quot;3&quot;&gt;Software Engineering&lt;/option&gt;
                                        &lt;option value=&quot;4&quot;&gt;Game Design&lt;/option&gt;
                                        &lt;option value=&quot;5&quot;&gt;Information Security and Forensics&lt;/option&gt;
                                    &lt;/select&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;
                                    Hobbies:
                                &lt;/td&gt;
                                &lt;td&gt;
                                    &lt;table&gt;
                                        &lt;tr&gt;
                                            &lt;td&gt;
                                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;1&quot; /&gt;
                                                Football
                                            &lt;/td&gt;
                                            &lt;td&gt;
                                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;2&quot; /&gt;
                                                Basketball
                                            &lt;/td&gt;
                                        &lt;/tr&gt;
                                        &lt;tr&gt;
                                            &lt;td&gt;
                                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;3&quot; /&gt;
                                                Soccer
                                            &lt;/td&gt;
                                            &lt;td&gt;
                                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;4&quot; /&gt;
                                                Volleyball
                                            &lt;/td&gt;
                                        &lt;/tr&gt;
                                        &lt;tr&gt;
                                            &lt;td&gt;
                                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;5&quot; /&gt;
                                                Baseball
                                            &lt;/td&gt;
                                            &lt;td&gt;
                                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;6&quot; /&gt;
                                                Softball
                                            &lt;/td&gt;
                                        &lt;/tr&gt;
                                        &lt;tr&gt;
                                            &lt;td&gt;
                                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;7&quot; /&gt;
                                                Tennis
                                            &lt;/td&gt;
                                            &lt;td&gt;
                                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;8&quot; /&gt;
                                                Badminton
                                            &lt;/td&gt;
                                        &lt;/tr&gt;
                                    &lt;/table&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;
                        &lt;/table&gt;
                    &lt;/div&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;input type=&quot;button&quot; value=&quot;&gt;&gt;&quot; onclick=&quot;copy()&quot; /&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;div id=&quot;divDetail2&quot;&gt;
                        &lt;input type=&quot;hidden&quot; name=&quot;ID&quot; /&gt;
                        &lt;table class=&quot;detail&quot;&gt;
                            &lt;tr&gt;
                                &lt;td&gt;
                                    name:
                                &lt;/td&gt;
                                &lt;td&gt;
                                    &lt;input name=&quot;Name&quot; /&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;
                                    bio:
                                &lt;/td&gt;
                                &lt;td&gt;
                                    &lt;textarea rows=&quot;3&quot; cols=&quot;15&quot; name=&quot;Bio&quot;&gt;&lt;/textarea&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;
                                    gpa:
                                &lt;/td&gt;
                                &lt;td&gt;
                                    &lt;input type=&quot;text&quot; name=&quot;GPA&quot; /&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;
                                    graduated?
                                &lt;/td&gt;
                                &lt;td&gt;
                                    &lt;input type=&quot;checkbox&quot; name=&quot;Graduated&quot; /&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;
                                    gender:
                                &lt;/td&gt;
                                &lt;td&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;Gender&quot; value=&quot;0&quot; /&gt;
                                    Male
                                    &lt;input type=&quot;radio&quot; name=&quot;Gender&quot; value=&quot;1&quot; /&gt;
                                    Female
                                &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;
                                    Birthday:
                                &lt;/td&gt;
                                &lt;td&gt;
                                    &lt;input type=&quot;text&quot; id=&quot;Text1&quot; class=&quot;birthday&quot; name=&quot;Birthday&quot; /&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;
                                    major:
                                &lt;/td&gt;
                                &lt;td&gt;
                                    &lt;select name=&quot;Major&quot;&gt;
                                        &lt;option value=&quot;0&quot;&gt;Select&lt;/option&gt;
                                        &lt;option value=&quot;1&quot;&gt;Computer Scinece&lt;/option&gt;
                                        &lt;option value=&quot;2&quot;&gt;Information Technology&lt;/option&gt;
                                        &lt;option value=&quot;3&quot;&gt;Software Engineering&lt;/option&gt;
                                        &lt;option value=&quot;4&quot;&gt;Game Design&lt;/option&gt;
                                        &lt;option value=&quot;5&quot;&gt;Information Security and Forensics&lt;/option&gt;
                                    &lt;/select&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                                &lt;td&gt;
                                    hobbies:
                                &lt;/td&gt;
                                &lt;td&gt;
                                    &lt;table&gt;
                                        &lt;tr&gt;
                                            &lt;td&gt;
                                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;1&quot; /&gt;
                                                football
                                            &lt;/td&gt;
                                            &lt;td&gt;
                                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;2&quot; /&gt;
                                                basketball
                                            &lt;/td&gt;
                                        &lt;/tr&gt;
                                        &lt;tr&gt;
                                            &lt;td&gt;
                                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;3&quot; /&gt;
                                                soccer
                                            &lt;/td&gt;
                                            &lt;td&gt;
                                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;4&quot; /&gt;
                                                velleyball
                                            &lt;/td&gt;
                                        &lt;/tr&gt;
                                        &lt;tr&gt;
                                            &lt;td&gt;
                                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;5&quot; /&gt;
                                                baseball
                                            &lt;/td&gt;
                                            &lt;td&gt;
                                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;6&quot; /&gt;
                                                softball
                                            &lt;/td&gt;
                                        &lt;/tr&gt;
                                        &lt;tr&gt;
                                            &lt;td&gt;
                                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;7&quot; /&gt;
                                                tennis
                                            &lt;/td&gt;
                                            &lt;td&gt;
                                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;8&quot; /&gt;
                                                badminton
                                            &lt;/td&gt;
                                        &lt;/tr&gt;
                                    &lt;/table&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;
                        &lt;/table&gt;
                    &lt;/div&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt; 		
	</pre>
</asp:Content>
